<script lang="ts" setup>
import {onMounted, ref, watch} from 'vue'
import {ElTable, ElMessage} from 'element-plus'
import {inventoryPageService} from '@/api/inventory/inventory'
import {materialCategoryPageService} from '@/api/material/materialCategory'
import {materialBrandPageService} from '@/api/material/materialBrand'
import {storePageService} from '@/api/basic/store'
import * as XLSX from 'xlsx'
import FileSaver from 'file-saver'

// 商品接口
interface Inventory{
  id:number
  storeId: number
  storeName: string //仓库名称
  materialName:string //商品名称
  materialBarcode:string //商品条码
  materialCategory: string  //商品分类
  materialBrand: string //商品品牌
  quantity: number //数量
}

// 数据表格
const tableData = ref<Inventory[]>([])
// 仓库名称选择器
const storeNameSelect = ref('')
const storeNameOptions = ref([]);
// 商品类别选择器
const materialCategorySelect = ref('')
const materialCategoryOptions = ref([]);
// 商品品牌选择器
const materialBrandSelect = ref('')
const materialBrandOptions = ref([]);
//分页数据模型
const pageNum = ref(1)//当前页
const pageSize = ref(10)//每页条数
const total = ref(20)//总条数

// 分页数据监听
watch([() => pageNum.value, () => pageSize.value], async () => {
  await getInventory();
});

// 商品列表查询
const getInventory = async ()=>{
  let params={
    pageNum:pageNum.value,
    pageSize:pageSize.value,
    storeId:storeNameSelect.value?storeNameSelect.value:null,
    categoryId:materialCategorySelect.value?materialCategorySelect.value:null,
    brandId:materialBrandSelect.value?materialBrandSelect.value:null,
  }
  let result = await inventoryPageService(params)
  tableData.value = result.records;
  total.value = result.total
}

// 挂载函数，渲染列表
onMounted(async ()=>{
  await getInventory();
  let storeName = await storePageService()
  let materialCategory = await materialCategoryPageService()
  let materialBrand = await  materialBrandPageService()

  // 遍历返回的仓库对象
  storeNameOptions.value = storeName.map(item => ({
    label: item.name,
    value: item.id,
  }));
  // 遍历返回的商品分类对象
  materialCategoryOptions.value = materialCategory.map(item => ({
    label: item.name,
    value: item.id,
  }));
  // 遍历返回的商品品牌对象
  materialBrandOptions.value = materialBrand.map(item => ({
    label: item.name,
    value: item.id,
  }));
})

// 查找
const search=()=>{
  getInventory().then(()=>{
    ElMessage.success("查询成功")
  })
}

// 刷新
const refresh = () => {
  reset()
  getInventory()
  ElMessage.success("刷新成功")
}

// 重置
const reset = () => {
  storeNameSelect.value = ''
  materialCategorySelect.value = ''
  materialBrandSelect.value = ''
}

// 添加导出Excel功能
const exportToExcel = () => {
  // 准备导出数据
  const exportData = tableData.value.map(item => ({
    '仓库ID': item.storeId,
    '仓库名称': item.storeName,
    '商品名称': item.materialName,
    '商品条码': item.materialBarcode,
    '商品分类': item.materialCategory,
    '商品品牌': item.materialBrand,
    '库存数量': item.quantity,
  }))
  // 创建工作簿
  const worksheet = XLSX.utils.json_to_sheet(exportData)
  const workbook = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(workbook, worksheet, '库存列表')
  // 生成Excel文件并下载
  const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' })
  const blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
  FileSaver.saveAs(blob, `库存列表_${new Date().toLocaleDateString()}.xlsx`)
  ElMessage.success('导出成功')
}
</script>

<template>
  <el-form label-width="auto" class="form-style">
    <div class="form-group">
      <div class="form-item">
        <el-form-item label="仓库:">
          <el-select v-model="storeNameSelect" placeholder="请选择仓库">
            <el-option v-for="item in storeNameOptions" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
      </div>
      <div class="form-item">
        <el-form-item label="商品分类:">
          <el-select v-model="materialCategorySelect" placeholder="请选择商品分类">
            <el-option v-for="item in materialCategoryOptions" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
      </div>
      <div class="form-item">
        <el-form-item label="商品品牌:">
          <el-select v-model="materialBrandSelect" placeholder="请选择商品品牌">
            <el-option v-for="item in materialBrandOptions" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
      </div>
      <div class="form-item">
        <el-button type="primary" @click="search">查询</el-button>
        <el-button @click="reset">重置</el-button>
        <el-button @click="refresh">刷新</el-button>
        <el-button @click="exportToExcel">导出Excel</el-button>
      </div>
    </div>
  </el-form>

  <div class="table-wrapper">
    <el-table border  height="72vh" ref="multipleTableRef" :data="tableData">
      <el-table-column property="storeId" label="仓库ID" show-overflow-tooltip/>
      <el-table-column property="storeName" label="仓库名称"  show-overflow-tooltip/>
      <el-table-column property="materialName" label="商品名称" show-overflow-tooltip/>
      <el-table-column property="materialBarcode" label="商品条码" show-overflow-tooltip/>
      <el-table-column property="materialCategory" label="商品分类"  show-overflow-tooltip/>
      <el-table-column property="materialBrand" label="商品品牌" show-overflow-tooltip/>
      <el-table-column property="quantity" label="库存数量" show-overflow-tooltip/>
    </el-table>
  </div>

  <div class="example-pagination-block">
    <el-pagination
        v-model:current-page="pageNum"
        v-model:page-size="pageSize"
        layout="prev, pager, next"
        :total="total"
    />
  </div>

</template>

<style scoped>
/* 表单 */
.form-style {
  margin-top: 5px;
}

/* 第1行盒子 */
.form-group {
  margin-left: 2vh;
}

/* 第1行盒子-表单组件 */
.form-item {
  display: inline-block;  /* 行内显示 */
  margin-right: 3vh;
}

/* 第1行盒子-表单组件-输入框 */
.form-item .el-form-item {
  width: 40vh;
}

/* 第2行组件 */
.button-group {
  margin-left: 3vh;
  margin-top: 5px;
}

/* 第2行组件-按钮 */
.button-group .el-button {
  width: 12vh;
}

/* 第3行表格盒子 */
.table-wrapper {
  margin-left: 2vh;
  margin-top: 10px;
}

/* 分页条盒子 */
.example-pagination-block {
  padding-left: 44%;
  margin-top: 10px; /* 根据需要调整上边距 */
}
</style>